<template>
    <div class="chat-files" :class="{ 'is-delete': isDelete }">
        <el-scrollbar>
            <div class="scrollbar-content" >
                <div v-for="item in filesLists" :key="item" class="item" @click="handleClick(item)">
                    <img alt="" :src="setIcon(item.name)" class="icon" />
                    <div class="info">
                        <div class="name">{{ withoutExtension(item.name) }}</div>
                        <div class="size">{{ getFileExtension(item.name) }} {{ trainMb(item.size) }}</div>
                    </div>
                    <div class="delete" v-if="isDelete" @click.stop="handleDelete(item)">
                        <el-icon>
                            <CircleCloseFilled />
                        </el-icon>
                    </div>
                </div>
            </div>
        </el-scrollbar>
        <ChatFileView ref="chatFileViewRef" />

        
    </div>
</template>
<script setup>
import { computed } from 'vue';
import ChatFileView from './ChatFileView.vue'

const props = defineProps({
    files: {
        type: Array,
        default: () => [],
    },
    isDelete: {
        type: Boolean,
        default: false,
    }
});
const filesLists = computed(() => props.files);
const getFileExtension = urlStr => {
    let fileExtension = '';
    if (urlStr.lastIndexOf('.') > -1) {
        fileExtension = urlStr.slice(urlStr.lastIndexOf('.') + 1);
        fileExtension = fileExtension.toLowerCase();
    }
    return fileExtension;
};

// 获取不带扩展名的文件名
const withoutExtension = filename => {
    if (!filename) return '';
    const lastDotIndex = filename.lastIndexOf('.');
    // 如果文件名中没有点，或者点在最后一位，则返回原文件名
    if (lastDotIndex === -1 || lastDotIndex === filename.length - 1) {
        return filename;
    }
    // 返回最后一个点之前的部分
    return filename.substring(0, lastDotIndex);
};
const setIcon = (file) => {
    let fileExtension = getFileExtension(file);
    if (fileExtension == 'doc' || fileExtension == 'docx') {
        return '/images/doc.svg';
    } else if (fileExtension == 'xls' || fileExtension == 'xlsx') {
        return '/images/xls.svg';
    } else if (fileExtension == 'pdf') {
        return '/images/pdf.svg';
    } else if (fileExtension == 'png' || fileExtension == 'jpg' || fileExtension == 'jpeg') {
        return '/images/image.svg';
    }
}

const trainMb = (bytes) => {
    if (!bytes || bytes === 0) return '0 KB';
    const MB_THRESHOLD = 1024 * 1024;
    if (bytes < MB_THRESHOLD) {
        const kb = bytes / 1024;
        return `${kb.toFixed(1)} KB`;
    } else {
        const mb = bytes / MB_THRESHOLD;
        return `${mb.toFixed(1)} MB`;
    }
}
const emit = defineEmits(['delete']);
const handleDelete = (item) => {
    const index = filesLists.value.findIndex(file => file === item);
    if (index !== -1) {
        emit('delete', { item, index });
    }
}
const chatFileViewRef = ref(null)
const handleClick = (item) => {
    console.log(item)
    chatFileViewRef.value.open(item.url,item.name)
}
</script>

<style scoped lang="scss">
.chat-files {
    max-width: 900px;
    min-width: 400px;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    .scrollbar-content {
        display: flex;
        width: fit-content;

        .item {
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            width: 211px;
            padding: 8px 10px;
            border-radius: 10px;
            border: 1px solid #E8E8E8;
            margin: 0px 5px 10px;
            position: relative;
            cursor: pointer;
        }

        .info {
            flex: 1;
            margin-left: 10px;
            color: #999999;
            font-size: 12px;
        }

        .icon {
            width: 40px;
            height: 40px;
        }

        .name {
            width: 128px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-bottom: 5px;
            font-size: 14px;
            color: #333333;
        }

        .delete {
            position: absolute;
            top: 0;
            right: 0;
            width: 16px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            display: none;
        }
    }

    &.is-delete {
        justify-content: flex-start;
        .item {
            &:hover {
                background: #F6F7F9;
                .delete {
                    display: block;
                }
            }
        }

        .item {
            margin-left: 0;
        }
    }
}
</style>